<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style type="text/css">
        .div1{
            margin-top: 20px;
            font-size: 16px;
            width: 260px;
        }
    </style>
</head>
<body>
<div style="padding-left: 5%;padding-top:5%">
    <form class="layui-form" action="#">
    <div class="layui-form-item div1" >
        <label class="layui-form-label">角色编号</label>
        <div class="layui-input-block">
            <input type="text" name="role_id" aria-disabled="true" lay-verify="required | role_id" autocomplete="off" placeholder="请输入用户账号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item div1">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="role_name" lay-verify="required | role_name" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item div1">
        <label class="layui-form-label">启用状态</label>
            <div class="layui-input-block">
                <input type="radio" name="role_state" value="1" title="启用" checked>
                <input type="radio" name="role_state" value="2" title="停用">
            </div>
    </div>
    <button type="button" lay-filter="demo1" lay-submit="demo1" style="margin-left:100px;" class="layui-btn">修改</button>
    <button type="button" id="quit" style="margin-left: 20px;" class="layui-btn">关闭</button>
    </form>
</div>
</body>
<script rel="script" src="../../js/jquery-3.4.1.js"></script>
<script rel="script" src="../../layui/layui.js"></script>
<script>
    layui.use(['laydate','form','layer'], function() {
        var laydate = layui.laydate;
        var form = layui.form
            , layer = layui.layer;


        var flag=true;
        var role_name=$("input[name=role_name]").val();
        $(function () {
            $("input[name=role_name]").blur(function (data) {
                var name=$("input[name=role_name]").val();
                console.log(role_name);
                if (name!=role_name) {
                    $.ajax({
                        url:"/findByRoleName.do",
                        type:"post",
                        data:{role_name:name},
                        success:function (res) {
                            if (res.code == 500 ) {
                                layer.msg(res.msg,{icon:5});
                                flag=false;
                            }else if (res.code ==502) {
                                layer.msg(res.msg,{icon:5});
                            }else if (res.code == 405){
                                layer.msg(res.msg,{icon:5});
                            }else {
                                flag=true;
                            }
                        }
                    });
                }

            });
            $("#quit").click(function () {
                parent.layer.close(parent.layer.index);
            });
        });


        form.on('submit(demo1)', function(data) {
            if (!flag){
                layer.msg("角色名重复",{icon:5});
            } else {
           if (data.field.role_state == 0){
               layer.confirm('是否停用角色', {
                   btn: ['是的', '不要'] //可以无限个按钮
               }, function(index, layero){
                   $.ajax({
                       url:"/roleUpdateAndinsert.do",
                       type:"post",
                       data:JSON.stringify(data.field),
                       success:function (res) {
                           console.log(res);
                           if (res.code == 200 ){
                               layer.msg(res.msg,{icon:1});
                               var second=1;
                               //定时器2秒后跳转
                               var interval = setInterval(function () {
                                   second--;
                                   if (second === -1) {
                                       parent.layer.close(parent.layer.index);
                                       clearInterval(interval);
                                   }
                               }, 1000);
                           }else if (res.code==500){
                               layer.msg(res.msg,{icon:5});
                           }else if (res.code == 405){
                               layer.msg(res.msg,{icon:5});
                           }
                       }
                   })
               }, function(index){
                   //按钮【按钮二】的回调
               });
           }else {
               $.ajax({
                   url:"/roleUpdateAndinsert.do",
                   type:"post",
                   data:JSON.stringify(data.field),
                   success:function (res) {
                       if (res.code == 200 ){
                           layer.msg(res.msg,{icon:1,time:2000});
                           var second=1;
                           //定时器2秒后跳转
                           var interval = setInterval(function () {
                               second--;
                               if (second === -1) {
                                   parent.layer.close(parent.layer.index);
                                   clearInterval(interval);
                               }
                           }, 1000);
                       }else if (res.code==500){
                           layer.msg(res.msg,{icon:5});
                       }else if (res.code == 405){
                           layer.msg(res.msg,{icon:5});
                       }
                   }
               })
           }
            }
        });



    });

</script>
</html>